<template>
<div id="degree">
  <navigation></navigation>
  <div class="banner">
    <p>AMERICAN HIGH</p>
    <p>SCHOOL</p>
    <p>美国高中
    </p>
    <div></div>
  </div>
  <div class="needs">
    <div class="item">
      <div class="left">
        <p>NO.1标准化成绩要求</p>
        <div></div>
        <p>中国学生赴美留学低龄化趋势日益明显,美国高中普遍需要托福成绩和SSAT成绩，部分顶级高中成绩要求达到很高标准，享誉海内外，并且有着“常春藤摇篮”的美誉。</p>
      </div>
      <div><img src="../../assets/images/degree/degree-2.jpg" /></div>
    </div>
    <div class="item">
      <div><img src="../../assets/images/degree/degree-3.jpg" /></div>
      <div class="left">
        <p>NO.2学术成绩</p>
        <div></div>
        <p>中国学生赴美留学低龄化趋势日益明显,美国高中普遍需要托福成绩和SSAT成绩，部分顶级高中成绩要求达到很高标准，享誉海内外，并且有着“常春藤摇篮”的美誉。</p>
      </div>
    </div>
    <div class="item">
      <div class="left">
        <p>NO.3综合背景</p>
        <div></div>
        <p>美国高中更注重青少年的领袖精英式培养，鼓励学生们专注于自己热爱的专业领域，并有着执着的成功决心，发展出天才少年的枝芽。</p>
      </div>
      <div><img src="../../assets/images/degree/degree-4.jpg" /></div>
    </div>
    <div class="item">
      <div>
        <img src="../../assets/images/degree/degree-5.jpg" />
      </div>
      <div class="left">
        <p>NO.4文书</p>
        <div></div>
        <p>文书是学生向学校展示自我的唯一叙述文字材料，围绕一个主题展开，层次分明，逻辑清晰，展现自我，让招生官了解学生的人生观，价值观，学术目标。</p>
      </div>
    </div>
    <div class="item">
      <div class="left">
        <p>NO.5综合背景</p>
        <div></div>
        <p>推荐信是从第三者的立场来介绍、展示申请人的综合素质以及优秀品质，学校通过第三方的客观描述，结合文书，对学生做出重要的录取综合评估。</p>
      </div>
      <div><img src="../../assets/images/degree/degree-6.jpg" /></div>
    </div>
    <div class="item">
      <div>
        <p class="spe-title">NO.6面试</p>
        <div class="spe-div"></div><img src="../../assets/images/degree/degree-33.jpg" /></div>
      <div class="left spe">
        <p style="fontSize: 0.24rem">作为与招生官直接面对面的申请最后环节，重要性不言而喻。一位文质彬彬，谦谦君子般的学生，会给学校留下良好的印象，大大增加录取成功率。但是重视精英教育的美国人，也会破格录取某些领域奇才与怪才，特别是艺术类和理工科类的高中。</p>
      </div>
    </div>
  </div>
  <div class="teacher">
    <p>招生官简介</p>
    <p>ADMISSIONS OFFICER PROFILE</p>
    <div class="item"></div>
    <div class="teacher-item">
      <img src="../../assets/images/degree/degree-8.jpg" />
      <div class="bottom">
        <p>凯斯女士</p>
        <p>青胜留学美高申请的美方专业顾问</p>
        <p>凯斯（keith）女士，是青胜留学美高申请的美方专业顾问，曾在全美最好的私立寄宿高中Phillips Exeter Academy招办工作，拥有超过15年的高校招生相关经验和专业知识。熟悉美国初中高中申请程序并参与招办核心招生工作，帮助众多学子</p>
      </div>
    </div>
    <div class="teacher-item">
      <img src="../../assets/images/degree/degree-35.jpg" />
      <div class="bottom">
        <p>文森特先生</p>
        <p>青胜留学美高申请的美方专业顾问</p>
        <p>担任青胜留学美高申请的美方专业顾问。他对招生工作有极大热情，不仅负责审阅招生材料和面试，学术造诣和招生背景颇受家长和学生欢迎，强大的知识储备量和独特的指导思路让每位申请人都能在申请过程中展现出与众不同的亮点。</p>
      </div>
    </div>
    <div class="teacher-item">
      <img src="../../assets/images/degree/degree-24.jpg" />
      <div class="bottom">
        <p>马西先生</p>
        <p>青胜留学美高申请的美方专业顾问</p>
        <p>担任青胜留学美高申请的美方专业顾问。在任乔特罗斯玛丽中学（Choate Rosemary Hall）招生官期间，担任学生事务部副院长，参与管理招办所有事务。</p>
      </div>
    </div>
    <p @click="toPage('/team')" class="more">查看更多</P>
  </div>
  <div class="stra">
    <p>高中留学攻略</p>
    <p>HIGH SCHOOL STUDY GUIDE</p>
    <div class="item"></div>
    <div v-for="item of newsList" @click="showDetail(item.id)" class="info-container">
      <img :src="item.picture" />
      <div>
        <p>{{item.title}}</p>
        <p>{{ item.description}}</p>
        <p>{{item.publish}}</p>
      </div>
    </div>

  </div>
  <div class="order">
    <p>
      美国高中排名
    </p>
    <p>
      AMERICAN HIGH SCHOOL RANKING </p>
    <div class="item"></div>
    <table class="order-table">
      <tr>
        <td class="title" style="width: 0.87rem;">排名</td>
        <td class="title" style="width: 2.86rem;">学校</td>
        <td class="title" style="width: 1.92rem;">地区</td>
        <td class="title" style="width: 1.04rem;"></td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">01</td>
        <td>BASIS Scottsdale</td>
        <td>Scottsdale, AZ</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/education/best-high-schools/arizona/districts/basis-school-inc/basis-scottsdale-871')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">02</td>
        <td>BASIS Chandler</td>
        <td>Chandler, AZ</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/education/best-high-schools/arizona/districts/basis-school-inc/basis-chandler-147202')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">03</td>
        <td>BASIS Oro Valley
        </td>
        <td>Oro Valley, AZ</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/education/best-high-schools/arizona/districts/basis-school-inc/basis-oro-valley-91703')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">04</td>
        <td>BASIS Tucson North</td>
        <td>Tucson, AZ</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/education/best-high-schools/arizona/districts/basis-school-inc/basis-tucson-north-140137')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">05</td>
        <td>BASIS Flagstaff</td>
        <td>Flagstaff, AZ</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/education/best-high-schools/arizona/districts/basis-school-inc/basis-flagstaff-200074')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">06</td>
        <td>Meridian School</td>
        <td>Round Rock, TX</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/education/best-high-schools/texas/districts/meridian-world-school-llc/meridian-school-153637')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">07</td>
        <td>International Academy<br> of Macomb</td>
        <td>Clinton<br> Township, MI</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/education/best-high-schools/michigan/districts/chippewa-valley-schools/international-academy-of-macomb-91614')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">08</td>
        <td>BASIS Peoria
        </td>
        <td>Peoria, AZ</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/education/best-high-schools/arizona/districts/basis-school-inc/basis-peoria-153220')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">09</td>
        <td>Baccalaureate School<br> for Global Education</td>
        <td>Long Island<br> City, NY</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/education/best-high-schools/new-york/districts/new-york-city-public-schools/baccalaureate-school-for-global-education-13381')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">10</td>
        <td>Thomas Jefferson<br> High School for<br> Science and Technology</td>
        <td>Alexandria, VA</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/education/best-high-schools/virginia/districts/fairfax-county-public-schools/thomas-jefferson-high-school-for-science-and-technology-20461')">查看</td>
      </tr>
    </table>
  </div>
  <pageFooter></pageFooter>
</div>
</template>
<script>
import navigation from "@/components/navigation/index";
import pageFooter from "@/components/footer/index";

import {
  NetworkUtil
} from "@/lib/util"

export default {
  components: {
    navigation,
    pageFooter
  },
  data() {
    return {
      newsList: []
    }
  },
  created() {
    NetworkUtil.request({
      url: '/api/service/highSchool',
      method: 'get'
    }, info => {
      this.newsList = info.list_1.concat(info.list_2, info.list_3)
      for (let item of this.newsList) {
        item.picture = 'https://www.keywinus.com/' + item.picture
      }
      console.log(this.newsList);
    }, err => {
      console.log(err)
    })
  },
  methods: {
    goPage(path) {
      window.location.href = path
    },
    toPage(path) {
      this.$router.push(path)
    },
    showDetail(id) {
      this.$router.push({
        name: 'serviceDetail',
        params: {
          id: id
        }
      })
    }
  }
}
</script>
<style lang="less" rel="stylesheet/less">
@import "index.less";
</style>
